<template>
    <view>
        <view class="background"></view>
        <navView navTitle="审批列表" backgroundColor="#008efe" titleColor="#fff" :isBack="true"></navView>

        <!-- 审批列表 -->
        <view class="message-container">
            <view class="message-card" v-for="(item, index) in filteredList" :key="index" @tap="goDetail(item)">
                <view class="card-main">
                    <view class="header">
                        <text class="title">{{ statusMap[item.key].title }}</text>
                        <text v-if="item.count > 0" class="badge"
                            :style="{ backgroundColor: statusMap[item.key].color }">
                            {{ item.count }}条待处理
                        </text>
                    </view>
                </view>
                <uni-icons type="right" size="28rpx" color="#C3C3C3"></uni-icons>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            message: {}, // 存储完整接口数据
            step:{},
            userInfo: {}, // 存储用户信息            
            statusMap: {
                // contract: {
                //     title: '合同审批',  // 新增标题字段
                //     color: '#4CD964',
                //     route: '/subpkg/contract/contractList/contractList'
                // },
                // consume: {
                //     title: '费用审批',
                //     color: '#FF9A2E',
                //     route: '/pages/finance/expense'
                // },
                // receivables: {
                //     title: '回款审批',
                //     color: '#4CD964',
                //     route: '/pages/finance/receivables'
                // },
                // invoice: {
                //     title: '供应商回款',
                //     color: '#9B51E0',
                //     route: '/subpkg/contract/contractOrder/contractOrder'
                // },
                // achievement: {
                //     title: '业绩目标',
                //     color: '#FF9A2E',
                //     route: '/pages/project/achievement'
                // },
                // approval: {
                //     title: '通用审批',
                //     color: '#008EFE',
                //     route: '/pages/approve/detail'
                // },
                // card: {
                //     title: '补卡申请',  // 合并重复的card配置
                //     color: '#FFC233',
                //     route: '/pages/staff/card'
                // },
                leave: {
                    title: '请假申请',
                    color: '#FF4D4D',
                    route: '/subpkg/attendance/leave'
                }
            }
        }
    },
    onLoad() {
        this.getsteplist()
        this.getApproveList();
    },
    computed: {
        filteredList() {
            return Object.keys(this.message)
                .filter(key => Object.keys(this.statusMap).includes(key))
                .map(key => ({
                    key,
                    msg: this.message[key].msg,
                    count: this.message[key].count
                }))
                .sort((a, b) => b.count - a.count);
        }
    },
    methods: {
        async getsteplist(){
            try {
                const res = await this.$request('/addons/qingdong/staff/getsteplist', 'GET', { type:"leave"});
                this.step = res.data; // 直接存储整个data对象
                const userInfo = uni.getStorageSync('userInfo')
                if (userInfo.id != res.data.flow_staff_ids){
                    uni.showToast({
                        title: '您没有权限审批',
                        icon: 'none'
                    })
                }
            } catch (error) {
                console.error('获取消息失败:', error);
            }
        },
        statusClass(status) {
            return this.statusMap[status]?.class || 'pending';
        },
        async getApproveList() {
            try {
                const res = await this.$request('/addons/qingdong/message/getExamineInfo', 'GET');
                this.message = res.data; // 直接存储整个data对象
            } catch (error) {
                console.error('获取消息失败:', error);
            }
        },
        goDetail(item) {
            uni.navigateTo({
                url: `${this.statusMap[item.key].route}?type=${item.key}`
            });
        }
    }
}
</script>

<style lang="less">
.message-container {
    padding: 20rpx 30rpx;

    .message-card {
        display: flex;
        align-items: center;
        padding: 28rpx;
        background: #fff;
        border-radius: 16rpx;
        margin-bottom: 24rpx;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

        .card-main {
            flex: 1;

            .header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 16rpx;

                .title {
                    font-size: 30rpx;
                    color: #333;
                    font-weight: 500;
                    max-width: 480rpx;
                }

                .badge {
                    font-size: 24rpx;
                    padding: 6rpx 20rpx;
                    border-radius: 32rpx;

                    &.pending {
                        background: #FF9A2E;
                        color: #fff;
                    }

                    &.approved {
                        background: #4CD964;
                        color: #fff;
                    }

                    &.rejected {
                        background: #FF4D4D;
                        color: #fff;
                    }
                }
            }

            .approve-info {
                display: flex;
                justify-content: space-between;
                margin-bottom: 12rpx;

                .time {
                    color: #999;
                    font-size: 24rpx;
                }
            }

            .subtitle {
                display: block;
                    font-size: 26rpx;
                    color: #666;
                    line-height: 1.4;
                    /* 替换Sass混合宏为标准CSS */
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
            }
        }
    }
}
</style>